<template>
    <fieldset>
        <legend>购物车</legend>
        <ul>
            <li v-for="item in cartData" :key="item.id">
                <b>产品名称:{{item.title}}</b>
                ------
                <b>价格:{{item.price}}</b>
                ------
                <b>数量:{{item.count}}</b>
                ------
                <button @click="remove(item)">移出</button>
            </li>
        </ul>
        <h1>总价:{{total}}</h1>
    </fieldset>
</template>

<script>
import { mapActions, mapGetters, mapState } from 'vuex'

    export default {
        computed: {
            ...mapState('carts',['cartData']),
            ...mapGetters('carts',['total'])
        },
        methods: {
            ...mapActions('carts',['JIANJIAN']),
            ...mapActions('carts',['JIAJIAJIA']),
            remove(item){
                this.JIANJIAN(item)
                this.JIAJIAJIA(item)
            }
        }
    }


</script>